{% extends 'layout.html' %}
{% block title %}修改密码{% endblock %}
{% block css %}
    <style>
             .card {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
            box-shadow: none;
            margin: 20px;
        }
        .card .h5 {
            width: 100%;
            text-align: center;
            background-color: #6c757d;
            color: white;
            padding: 10px 0;
            border-radius: 5px 5px 0 0;
        }
        .card table {
            width: 100%;
        }
        .card table tr {
            display: flex;
            justify-content: space-between;
        }
        .card table td {
            flex: 1;
        }

        .card input[type="password"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;  /* 更简洁的输入框 */
            border-radius: 4px;
        }

        /* 统一提示信息样式 */
        .alert {
            border-radius: 4px;
            border: 1px solid transparent; /* 去掉冗余边框 */
        }
    </style>
{% endblock %}
{% block content %}
    <a href="/user_view">
        <button type="reset" class="btn btn-outline-secondary mb-3">← 返回</button>
    </a>
    <div class="card">
        <div class="h5">
            <h2 style="font-weight: 300">修改密码</h2>  <!-- 更轻的字重 -->
        </div>
        <form id="new-form" method="POST" action="/change_password/">
            {% csrf_token %}
            {% if success_message %}
                <div class="alert alert-success text-center mt-3" id="qd">
                    {{ success_message }}
                </div>
            {% endif %}
            <div class="list-group list-group-flush p-2">
                <table>
                    <tr>
                        <td>原密码：</td>
                        <td><input type="password" name="old_password" required></td>
                    </tr>
                    <tr>
                        <td>新密码：</td>
                        <td><input type="password" name="new_password" required></td>
                    </tr>
                    <tr>
                        <td>确认新密码：</td>
                        <td><input type="password" name="confirm_password" required></td>
                    </tr>
                </table>
            </div>
            <div class="text-center">
                <button id="change" type="submit" class="btn btn-primary px-4">提交修改</button>
            </div>
            {% if error_message %}
                <div class="alert alert-danger text-center mt-3" id="qd">
                    {{ error_message }}
                </div>
            {% endif %}
        </form>
    </div>
    <script>
        $(document).ready(function () {
            $('#new-form').click(function (event) {
                $('#qd').hide();
            });
        });
    </script>
{% endblock %}